<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			td {
				background: grey;
			}
			
			div {
				font-size: 40px;
				width: 300px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				margin: 0px auto;
				border: 5px solid salmon;
				background: sandybrown;
				color: #FFFFFF;
				display: none;
			}
			
			.td1 {
				background: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<table id="table" width="300" height="300" align="center" border="1" cellpadding="0" cellspacing="0">
		</table>
		<div id="win">
			恭喜过关
		</div>
		<script>
			var table = document.getElementById("table");
			var tds;
			var num = 3;
			window.onload = createTable();

			function createTable() {
				table.innerHTML = "";
				for(var i = 0; i < num; i++) {
					var row = table.insertRow();
					for(var k = 0; k < num; k++) {
						var cell = row.insertCell();
					}
				}
				tds = table.getElementsByTagName("td");
				var cellindex;
				var rowindex;
				for(var i = 0; i < tds.length; i++) {
					tds[i].onclick = function() {
						cellindex = this.cellIndex;
						rowindex = this.parentNode.rowIndex;
						for(var i = 0; i < tds.length; i++) {
							if(tds[i].cellIndex == cellindex || tds[i].parentNode.rowIndex == rowindex) {
								if(tds[i].className) {
									tds[i].className = "";
								} else {
									tds[i].className = "td1";
								}
							}
						}
						isWin();
					}
				}
			}

			function isWin() {
				var iswin = true;
				tds = table.getElementsByTagName("td");
				for(var i = 0; i < tds.length; i++) {
					if(tds[i].className == "") {
						return iswin = false;
						break;
					}
				}
				if(iswin) {
					document.getElementById("win").style.display = "block";

					setTimeout(function() {
						document.getElementById("win").style.display = "none";
						num++;
						createTable();
					}, 1000)
				}
			}
		</script>
	</body>

</html>